<style>
  .layui-table-cell .layui-table-sort {
    display: none;
  }

  .layui-table-view .layui-table-tool-self {
    display: flex;
    justify-content: flex-end;
    position: initial;
    margin-top: 12px;
  }
</style>

<!-- 正文开始 -->
<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-card-body">
      <!-- 头部操作栏 -->
      <div class="layui-form lay-header">
        <div class="toolbar">
          <div class="layui-form-item lay-query-content">
            <div class="lay-query-box">
              <div class="query-lt">
                <div class="layui-inline">
                  <label class="layui-form-label">在制品料号：</label>
                  <div class="layui-input-inline">
                    <input name="skuCode" id="skuCode" class="layui-input" type="text" placeholder="请输入在制品料号" autocomplete="off" />
                  </div>
                </div>
                <div class="layui-inline">
                  <label class="layui-form-label">在制品名称：</label>
                  <div class="layui-input-inline">
                    <input name="skuName" id="skuName" class="layui-input" type="text" placeholder="请输入在制品名称" autocomplete="off" />
                  </div>
                </div>

                <div class="layui-inline">
                  <label class="layui-form-label">规格：</label>
                  <div class="layui-input-inline">
                    <input name="skuSpec" id="skuSpec" class="layui-input" type="text" placeholder="请输入规格" autocomplete="off" />
                  </div>
                </div>
                <div class="layui-inline">
                  <button class="layui-btn icon-btn color-reseda" lay-filter="formSubSearchLog" lay-submit layui-form-keyDownSearch="true">查询</button>
                  <button class="layui-btn icon-btn color-white" lay-filter="resets" lay-submit>重置</button>
                </div>
                <div class="query-rt">
         
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 表格 -->
        <div class="table-bor">
          <table class="layui-table" id="productionProgressTable" lay-filter="productionProgressTable"></table>
        </div>
      </div>
    </div>
  </div>

  <!-- 表格操作列 -->
  <script type="text/html" id="productionProgressTabBar">
    <a class="layui-btn  layui-btn-xs" lay-event="detail">详情</a>
  </script>

  <!-- js部分 -->
  <script>
    layui.use(["layer", "form", "table", "laydate", "admin", "laytpl", "tableTreeDj", "config"], async function () {
      var $ = layui.jquery;
      var layer = layui.layer;
      var laydate = layui.laydate;
      var table = layui.table;
      var form = layui.form;
      var config = layui.config;
      var admin = layui.admin;

      table.render({
        elem: "#productionProgressTable",

        url: config.base + "production/productionPlan/admin/productionProgress/list",
        page: true,
        cellMinWidth: 100,

        // 序号	在制品料号	在制品名称	规格	制造令数量	订单需求数量	在库库存数量	总排产量	总报工数	总合格数	不合格数	入库数	达成率	开始生产日期	操作

        cols: [
          [
            {
              field: "skuCode",
              title: "在制品料号",
              align: "center"
            },
            {
              field: "skuName",
              title: "在制品名称",
              align: "center"
            },
            {
              field: "skuSpec",
              title: "规格",
              align: "center"
            },
            {
              field: "recordCount",
              title: "制造令数量",
              align: "center"
            },
            {
              field: "productionQuantity",
              title: "订单需求数量",
              align: "center"
            },
            {
              field: "inventoryQuantity",
              title: "在库库存数量",
              align: "center"
            },
            {
              field: "productionPlanQuantity",
              title: "总排产量",
              align: "center"
            },
            {
              field: "reportQuantity",
              title: "总报工数",
              align: "center"
            },
            {
              field: "okQuantity",
              title: "总合格数",
              align: "center"
            },
            {
              field: "noOkQuantity",
              title: "不合格数",
              align: "center"
            },
            {
              field: "inWarehouseQuantity",
              title: "入库数",
              align: "center"
            },
            {
              field: "completionRate",
              title: "达成率",
              align: "center"
            },
            {
              field: "createTime",
              title: "开始生产日期",
              align: "center"
            },
            {
              title: "操作",
              align: "center",
              fixed: "right",
              toolbar: "#productionProgressTabBar"
            }
          ]
        ]
      });

      table.on("tool(productionProgressTable)", function (obj) {
        if (obj.event === "detail") {
          admin.formOpen({
            area: ["80%", "80%"],
            title: "在制作品详情",
            path: "components/productionPlan/productionProgressForm.html",
            success: function () {
              parentData.data = obj.data;
            }
          });
        }
      });
      form.on("submit(formSubSearchLog)", function (data) {
        table.reload("productionProgressTable", {
          where: {
            skuCode: data.field.skuCode,
            skuName: data.field.skuName,
            skuSpec: data.field.skuSpec
          }
        });
      });
      form.on("submit(resets)", function (data) {
        $(".lay-header").find("select").val("");
        $(".lay-header").find("input").val("");
        let field = data.field;
        for (let key in field) {
          field[key] = "";
        }
        table.reload("productionProgressTable", {
          where: field,
          page: { curr: 1 }
        });
      });
    });
  </script>
  <style>
    .addproductionProgressDetailForm-title {
      width: 100%;
      margin-left: 20px;
    }

    .addproductionProgressDetailForm-title .title,
    .title {
      display: inline-block;
      font-size: 16px;
      font-weight: bold;
      color: #333333;
      line-height: 19px;
      position: relative;
      padding: 6px 0 19px 0;
    }

    .addproductionProgressDetailForm-title .title:after,
    .title:after {
      content: "";
      display: block;
      position: absolute;
      left: 0;
      bottom: 0;
      width: calc(100% + 6px);
      height: 3px;
      background: #0a8b0a;
    }

    .addTable {
      height: 30px;
      margin-left: 30px;
      line-height: 30px;
      padding: 0 10px;
    }
  </style>
</div>
